<!-- HR模块人员资料管理界面 -->
<template>
  <div class="admin-hr-personnel">
    <div class="hr-personal-select">
      <el-form
        :inline="true"
        :model="formPersonnel"
        ref="form"
        label-width="80px"
        size="normal"
      >
        <el-form-item label="工号" size="normal">
          <el-input
            placeholder="输入查询工号"
            size="normal"
            clearable
            v-model.number="formPersonnel.number"
          ></el-input>
        </el-form-item>
        <el-form-item label="姓名" size="normal">
          <el-input
            placeholder="输入查询姓名"
            size="normal"
            clearable
            v-model="formPersonnel.name"
          ></el-input>
        </el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="SelectPersonnel"
          >查询</el-button
        >
      </el-form>
      <el-button
        type="primary"
        icon="el-icon-plus"
        class="hr-personnel-add"
        @click="centerDialogVisible = true"
        >新增</el-button
      >
    </div>
    <div class="hr-personal-datagrid">
      <el-table :data="tableDate" border :row-class-name="tableRowClassName" height="400">
        <el-table-column fixed prop="number" label="工号" width="100">
        </el-table-column>
        <el-table-column fixed prop="name" label="姓名" width="100">
        </el-table-column>
        <el-table-column prop="sex" label="性别" width="100"> </el-table-column>
        <el-table-column prop="age" label="年龄" width="100"> </el-table-column>
        <el-table-column prop="boarddate" label="入职日期" width="150">
        </el-table-column>
        <el-table-column prop="place" label="户籍所在地" width="150">
        </el-table-column>
        <el-table-column prop="idcard" label="证件号码" width="150">
        </el-table-column>
        <el-table-column prop="departmentone" label="一级部门" width="150">
        </el-table-column>
        <el-table-column prop="departmenttwo" label="二级部门" width="150">
        </el-table-column>
        <el-table-column prop="leader" label="部门领导" width="150">
        </el-table-column>
        <el-table-column prop="job" label="职位" width="150"> </el-table-column>
        <el-table-column prop="status" label="状态" width="100">
        </el-table-column>
        <el-table-column label="操作" width="200" fixed="right">
          <template slot-scope="scope">
            <el-button size="mini" icon="el-icon-edit" @click.native.prevent="onUpdatePersonnel(scope.$index)">编辑</el-button>
            <el-button
              size="mini"
              type="danger"
              icon="el-icon-delete"
              @click.native.prevent="onDelPersonnel(scope.$index)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
     
    </div>
      <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page.sync="currentPage"
      :page-sizes="[1,5,10]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next,jumper"
      :total="totalItems"
    ></el-pagination> 
    <div class="hr-personnel-dialog">
      <el-dialog title="新增人员" :visible.sync="centerDialogVisible" center>
        <el-form
          :model="formAdd"
          ref="formAdd"
          label-width="80px"
          :inline="true"
          size="normal"
        >
          <el-form-item label="工号">
            <el-input
              v-model="formAdd.number"
              placeholder="请输入新增工号"
            ></el-input>
          </el-form-item>
          <el-form-item label="姓名">
            <el-input
              v-model="formAdd.name"
              placeholder="请输入新增姓名"
            ></el-input>
          </el-form-item>
          <el-form-item label="性别">
            <el-input
              v-model="formAdd.sex"
              placeholder="请输入新增性别"
            ></el-input>
          </el-form-item>
          <el-form-item label="年龄">
            <el-input
              v-model="formAdd.age"
              placeholder="请输入新增年龄"
            ></el-input>
          </el-form-item>
          <el-form-item label="入职日期">
            <el-input
              v-model="formAdd.boarddate"
              placeholder="请输入入职日期"
            ></el-input>
          </el-form-item>
          <el-form-item label="户籍地">
            <el-input
              v-model="formAdd.place"
              placeholder="请输入户籍地"
            ></el-input>
          </el-form-item>

          <el-form-item label="证件号码">
            <el-input
              v-model="formAdd.idcard"
              placeholder="请输入证件号码"
            ></el-input>
          </el-form-item>
          <el-form-item label="一级部门">
            <el-input
              v-model="formAdd.departmentone"
              placeholder="请输入一级部门"
            ></el-input>
          </el-form-item>
          <el-form-item label="二级部门">
            <el-input
              v-model="formAdd.departmenttwo"
              placeholder="请输入二级部门"
            ></el-input>
          </el-form-item>
          <el-form-item label="部门领导">
            <el-input
              v-model="formAdd.leader"
              placeholder="请输入部门领导"
            ></el-input>
          </el-form-item>
          <el-form-item label="职位">
            <el-input v-model="formAdd.job" placeholder="请输入职位"></el-input>
          </el-form-item>
          <el-form-item label="状态">
            <el-input
              v-model="formAdd.status"
              placeholder="请假/正常/加班/出差"
            ></el-input>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="onAddPersonnel"
              >立即添加</el-button
            >
            <el-button @click="onNoneDailg">取消</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </div>
     <div class="hr-personnel-dialogUpdate">
      <el-dialog title="修改人员" :visible.sync="updateDialogVisible" center>
        <el-form
          :model="formUpdate"
          ref="formAdd"
          label-width="80px"
          :inline="true"
          size="normal"
        >
          <el-form-item label="工号">
            <el-input
              v-model="formUpdate.number"
              placeholder="请输入新增工号"
            ></el-input>
          </el-form-item>
          <el-form-item label="姓名">
            <el-input
              v-model="formUpdate.name"
              placeholder="请输入新增姓名"
            ></el-input>
          </el-form-item>
          <el-form-item label="性别">
            <el-input
              v-model="formUpdate.sex"
              placeholder="请输入新增性别"
            ></el-input>
          </el-form-item>
          <el-form-item label="年龄">
            <el-input
              v-model="formUpdate.age"
              placeholder="请输入新增年龄"
            ></el-input>
          </el-form-item>
          <el-form-item label="入职日期">
            <el-input
              v-model="formUpdate.boarddate"
              placeholder="请输入入职日期"
            ></el-input>
          </el-form-item>
          <el-form-item label="户籍地">
            <el-input
              v-model="formUpdate.place"
              placeholder="请输入户籍地"
            ></el-input>
          </el-form-item>

          <el-form-item label="证件号码">
            <el-input
              v-model="formUpdate.idcard"
              placeholder="请输入证件号码"
            ></el-input>
          </el-form-item>
          <el-form-item label="一级部门">
            <el-input
              v-model="formUpdate.departmentone"
              placeholder="请输入一级部门"
            ></el-input>
          </el-form-item>
          <el-form-item label="二级部门">
            <el-input
              v-model="formUpdate.departmenttwo"
              placeholder="请输入二级部门"
            ></el-input>
          </el-form-item>
          <el-form-item label="部门领导">
            <el-input
              v-model="formUpdate.leader"
              placeholder="请输入部门领导"
            ></el-input>
          </el-form-item>
          <el-form-item label="职位">
            <el-input v-model="formUpdate.job" placeholder="请输入职位"></el-input>
          </el-form-item>
          <el-form-item label="状态">
            <el-input
              v-model="formUpdate.status"
              placeholder="请假/正常/加班/出差"
            ></el-input>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="onUpdatelist"
              >立即修改</el-button
            >
            <el-button @click="onNoneUpdDailg">取消</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
     </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      tableDate: [],
      formPersonnel: {
        number: "",
        name: "",

      },
      pageSize:5,   //每页5条数据
      currentPage:1,//默认第一页
      totalItems:0,
      updateDialogVisible:false,
      centerDialogVisible: false,
      formAdd:{
          number:'',
          name:'',
          sex:'',
          age:'',
          boarddate:'',
          place:'',
          idcard:'',
          departmentone:'',
          departmenttwo:'',
         leader:'',
         job:'',
         status:''
      },
      formUpdate:{
          number:'',
          name:'',
          sex:'',
          age:'',
          boarddate:'',
          place:'',
          idcard:'',
          departmentone:'',
          departmenttwo:'',
         leader:'',
         job:'',
         status:''
      },
      filterTableData: [],
      rowindex:'',
      resultList:[],
      tempList:[]
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
  
    //奇偶数行的颜色变化
    tableRowClassName(rowIndex) {
      if ((rowIndex + 1) % 2 == 0) {
        return "warning-row";
      } else if (rowIndex % 2 == 0) {
        return "success-row";
      }
      return "";
    },
    SelectPersonnel: function () {
      // let that = this;
      this.$http.get("/getPersonneInfo").then((res) => {
        
        if (this.formPersonnel.number == "" && this.formPersonnel.name == "") {
       //   console.log("全部数据");
           this.tableDate = res.data;
           this.totalItems=this.tableDate.length
        } else if (
          this.formPersonnel.number !== "" ||
          this.formPersonnel.name !== ""
        ) {
             this.tableDate = res.data;
             this.resultList=[]
          this.tableDate.forEach(item=>{
              
             if(this.formPersonnel.number==item.number&&this.formPersonnel.name==''){ 
                //   this.tableDate=[]
                // this.tableDate.push(item)
                this.resultList.push(item)
            }else if(this.formPersonnel.name==item.name&&this.formPersonnel.number==''){
                // this.tableDate=[]
                // this.tableDate.push(item)
                 this.resultList.push(item)
            }else if(this.formPersonnel.number==item.number&&this.formPersonnel.name==item.name){
              this.resultList.push(item)
            }else if((this.formPersonnel.number==item.number&&this.formPersonnel.name!=item.name)||(this.formPersonnel.name==item.name&&this.formPersonnel.number!=item.number)){
              this.resultList=[]
            }
          })
          this.tableDate=[]
          this.tableDate=this.resultList
          this.totalItems=this.tableDate.length

        }
      
      });
       },
        //分页
    handleSizeChange:function(size){
      this.pageSize=size;
      this.handleCurrentChange(this.pageSize)
    //  console.log(this.pageSize);

    },
    //控制页面切换
    handleCurrentChange:function(currentPage){ 
    this.currentPage=currentPage
  this.currentchangePage(this.tableDate,this.currentPage)
    },
    //分页方法
    currentchangePage(list,currentPage){
let from =(currentPage-1)*this.pageSize
let to=currentPage*this.pageSize
this.tempList = [];
      for (; from < to; from++) {
        if (list[from]) {
          this.tempList.push(list[from]);
        }
      }
    
      this.tableDate=this.tempList
     
    },
      /*   */
   
    onAddPersonnel:function(){
        if(this.formAdd.number!=''&&this.formAdd.name!=''&&this.formAdd.sex!=''&&this.formAdd.age!=''&&this.formAdd.boarddate!=''&&this.formAdd.place!=''&&this.formAdd.idcard!=''&&this.formAdd.departmentone!=''&&this.formAdd.departmenttwo!=''&&this.formAdd.leader!=''&&this.formAdd.job!=''&&this.formAdd.status!=''){
       this.tableDate.push(this.formAdd)
        this.centerDialogVisible=false
        this.formAdd=[]
        this.totalItems=this.tableDate.length

        }else{
            alert('请将信息补充完整')
        }
       
    },
    //取消导航栏
    onNoneDailg:function(){
         this.centerDialogVisible=false
          this.formAdd=[]
    },

    //删除
    onDelPersonnel:function(rowIndex){    
      this.tableDate.splice(rowIndex,1)
      this.totalItems=this.tableDate.length
    },
    //修改
    onUpdatePersonnel:function(rowIndex){
          this.updateDialogVisible=true
          this.formUpdate=this.tableDate[rowIndex]
          this.rowindex=rowIndex 
         
    },
    //确认修改
    onUpdatelist:function(){
           this.tableDate.splice(this.rowindex,1,this.formUpdate)
           this.updateDialogVisible=false
           this.formUpdate=[]
    },
    onNoneUpdDailg:function(){
           this.updateDialogVisible=false
    }
    
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.SelectPersonnel();
  
    //async 
  
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style  scoped>
.admin-hr-personnel {
  width: 100%;
  margin-left: 30px;
  margin-top: 70px;
  position: relative;

}
.warning-row {
  background: red;
}

.success-row {
  background: #f0f9eb;
}
.hr-personnel-dialog {
  width: 600px;
  height: 600px;
  position: absolute;
  left: 20%;
  top: 10%;
}
.hr-personnel-dialogUpdate {
  width: 600px;
  height: 600px;
  position: absolute;
  left: 20%;
  top: 10%;
}
.hr-personal-datagrid {
 
  overflow-y: scroll;
}
</style>